import doT from 'dot';
import template from './InfoBarList.html';
import './InfoBarList.css';

export default class InfoBarList {
    constructor(domId, dataObj) {
        this.container = document.getElementById(domId);

        const arr = dataObj.array;
        let max = 0;
        let min = 0;
        arr.forEach((item, index) => {
            if(index === 0) {
                max = item.value;
                min = item.value;
            }

            if(item.value > max) {
                max = item.value;
            }
            if(item.value < min) {
                min = item.value;
            }
        });
        let deta = 100 / (max - min);
        arr.forEach((item, index) => {
            item['width'] = (item.value - min) * deta + 10 + 'px';
        });

        const html = doT.template(template)(dataObj);
        this.container.innerHTML = html;

        if(dataObj.callback) {
            const domList = this.container.getElementsByClassName('info-bar-list-item-name');
            for (let index = 0; index < domList.length; index++) {
                domList[index].addEventListener('click', () => {
                    dataObj.callback(dataObj.array[index].coordinate)
                })
            }
        }
    }
}